<!-- 缺省页 -->
<template>
  <view class="defaultPage" :style="'height: calc(100% - ' + minusHeight + 'px);'">
    <view class="posBox">
      <image v-if="imageSrc" :src="imageSrc" mode="widthFix" class="imageBox" />
      <view v-if="tips" class="tipsBox">{{tips}}</view>
      <view v-if="tips2" class="tipsBox">{{tips2}}</view>
      <view v-if="configText" class="u-flex"><view class="btn" :class="{'loginBtn': configText === '去登录','sloidBtn': configText === '了解速速团'}" @click.stop="_btnClick">{{configText}}</view></view>
      <view v-if="custoBtn">
        <slot></slot>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  props: {
    minusHeight: {
			// 主盒子需要减去的高度
			type: Number,
			default: 0
		},
    type: {
      type: [Number, String],
      default: 0
    },
    tips: {
      type: String,
      default: ''
    },
    tips2: {
      type: String,
      default: ''
    },
    configText: { // 按钮文字，不传则不显示
      type: String,
      default: ''
    },
    custoBtn: { // 是否自定义按钮
      type: Boolean,
      default: false
    },
  },
  computed: {
    imageSrc(){
      // 有需要自己往下加类型
      if(this.type == 1){ // 文件图片
        return 'https://image.qqpyyds.com/mpAppImg/noneImg/order_default.png'
      }else if(this.type == 2){ // 空盒子图片
        return 'https://image.qqpyyds.com/mpAppImg/noneImg/default_img.png'
      }else if(this.type == 3){ // 搜索图片
        return 'https://image.qqpyyds.com/mpAppImg/noneImg/search_default_img.png'
      }else if(this.type == 4){ // 沙发图片
        return 'https://image.qqpyyds.com/mpAppImg/noneImg/gentuan_img.png'
      }else{
        return ''
      }
    }
  },
  methods:{
    // 按钮点击方法
    _btnClick(){
      if(this.configText === '了解速速团'){
        uni.navigateTo({url: '/pagesA/components/WebView'})
      }else{
        this.$emit('config')
      }
    }
  }
}
</script>

<style lang="scss" scoped>
.defaultPage{
  width: 100%;
  position: relative;
  .posBox{
    position: absolute;
    width: 100%;
    top: 50%;
    transform: translateY(-50%);
    text-align: center;
  }
  .imageBox{
    width: 45%;
    height: 212rpx;
  }
  .tipsBox{
    color: #969799;
    text-align: center;
  }
  .btn{
    background: #E44435;
    padding: 0 30rpx;
    border-radius: 60rpx;
    color: #FFF;
    line-height: 60rpx;
    margin: 0 auto;
    margin-top: 25rpx;
    font-size: 28rpx;
  }
  .btn.loginBtn{
    font-size: 28rpx;
    padding: 0 54rpx;
    line-height: 64rpx;
    border-radius: 64rpx;
  }
  .btn.sloidBtn{
    background: inherit;
    color: #E44435;
    border: solid 1px #E44435;
  }
}
</style>